
<style>
        .obj-list-box{
            height: 100%;
            border: 1px solid #f2f2f2;
            box-shadow: 0 0 2px #888;
            border-radius: 10px;
            padding: 15px;
            background: white;
            margin: auto;
            /* width: 250px; */
            
        }
        .obj-list-box .obj-list-box-header {
            height: 50px;
            line-height: 50px;
            background: white;
            text-align: center;
            border-bottom: 1px #f2f2f2 solid;
            font-size: 25px;
        }
    
        .obj-list-box .obj-list-box-header .obj-list-box-title {
            font-size: 15px;
            color: #6e6e6e;
            font-weight: 600;
        }
    
        .obj-list-box .obj-list-box-header .iconfont  {
            width: 50px;
            font-size: 20px;
            cursor: pointer;
            color: #fff;
            /* font-weight: 800; */
        }
    
        .obj-list-box #btn_header_left {
            float: left;
            /* color: #ff5454; */
            /* background-color: #ff5454; */
            /* border-radius: 15px; */
            
        }
    
        .obj-list-box #btn_header_right {
            float: right;
            /* color: #ffab2e; */
            /* background-color:#ffab2e; */
            /* border-radius: 15px; */
            
        }

        .obj-list-box #btn_header_left i {
            color: #ff5454;
            /* background-color:#ff5454; */
            /* border-radius: 50px; */
            /* padding: 1px; */
            
        }
    
        .obj-list-box .content {
            overflow-y: auto;
            overflow-x: hidden;
            display: inline-block;
            height: 600px;
            width: 100%
        }
    
        .obj-list-box .footer {
            height: 50px;
            background: white;
            padding: 5px;
        }
    
    
        .obj-list-box .time-tag {
            /*margin:0 auto;*/
            text-align: center;
        }
    
        .obj-list-box .time-tag .text {
            display: inline-block;
            padding: 5px 3px;
            background: #d6d4d438;
            text-align: center;
            /*width: 100px;*/
            margin: auto;
            margin-top: 5px;
            border-radius: 5px;
        }
    
        .obj-list-box .input {
    
            width: calc(100% - 125px);
            /*margin-left: 20px;*/
        }
    
        .obj-list-box .input-content {
            width: 100%;
            height: 48px;
        }
    
        .obj-list-box .button-upload {
            /*width: 70px;*/
            margin: auto;
        }
    
        .obj-list-box .button-send {
            width: 70px;
            margin-left: 5px;
        }
    
        .obj-list-box .type-file {
            color: blue;
        }
    
        .obj-list-box #loading {
            text-align: center;
            position: absolute;
            width: calc(100%);
            left: 0;
            top: 51px;
            display: none;
            background: white;
        }
    
        .obj-list-box .content-item {
            padding: 10px 20px;
        }
    
        .obj-list-box .content-item .content-item-title {
            font-size: 18px;
            font-weight: 600;
            color: #525252;
        }
    
        .obj-list-box .content-item .content-item-title:hover {
            color: #49c796;
            cursor: pointer;
        }
    
        .obj-list-box .content-item .content-item-title-select {
            color: #0095ff;
        }
    
    
        .obj-list-box .content-item .content-item-note {
            color: #c5c5c5;
            font-size: 10px;
            font-weight: 600;
        }
    
        .obj-list-box .content-item .content-item-note i {
            font-size: 10px;
        }
    
        .obj-list-box .content-item .class-hr {
            margin: 0;
            display: none;
        }
</style>
<script type="text/html" id="tpl-file_tool_objlist">
    <div class="obj-list-box">
        <!-- <div id='loading'>加载中...</div> -->
        <div class="obj-list-box-header">
            <div id="btn_header_left" class="layui-inline"><i class="iconfont eicon-logout" title="退出登录"></i>
            </div>
            <div class="layui-inline obj-list-box-title">日历记事本</div>
            <div id="btn_header_right" class="layui-inline"><i class="iconfont eicon-add-more" title="更多操作"></i>
            </div>
        </div>
        <div class="content-box">
            <a class="content">

            </a>
        </div>
    </div>
</script>
<script type="text/javascript">
    app.base.loadApi(['apiObject','apiLogin','apiUser']);
    app.defTpl('objectList', function (tplArg) {
        layui.use(['layer', 'laytpl','apiObject','apiLogin','dropdown','apiUser'], function () {
            var laytpl = layui.laytpl, $ = layui.$;

            // laytpl($('#tpl-file_tool_objlist').html()).render({}, function (html) {
            //     $(tplArg.elem).html(html)
            // })
            
            app.base.tplRender('#tpl-file_tool_objlist',{}, tplArg.elem)
            

            // 记录最新最旧时间
            var time = { new: 0, old: 0 }
            //0 非选择状态
            var checkStatus = 0;
            // 最新页码记录，用于滑到顶部加载
            var newPage = 1
            setWindow()
            getContent(1)
            
            var rightMenu= [
                {
                    title: '个人信息'
                    , id: 99
                },
                {
                    title: '密码修改'
                    , id: 100
                },
                {
                    title: '新建项目'
                    , id: 101
                },
            ]
            
            layui.apiUser.getUserInfo(function(info){
                if(info.auth_id==1){
                    rightMenu.push({
                        title: '管理平台'
                        , id: 102
                    })
                }
            })


            layui.dropdown.render({
                elem: '#btn_header_right'
                , data: rightMenu
                , click: function (obj) {
                    this.elem.val(obj.title);
                    if(obj.id==101){
                        // location.href='/calendar/index/add_object'
                        layer.prompt({
                            title: "新建项目"
                        }, function (value, index, elem) {

                            $.ajax({
                                url: '/objectapi/add',
                                type: "post",
                                data: {
                                    "name": value,
                                },
                                success: function (res) {
                                    if (res['code'] == 1) {
                                        getContent(1);
                                    }
                                }
                            })
                            layer.close(index);
                        });
                    } else if(obj.id == 102){
                        // 管理平台
                        app.go('/admin')
                    } else if (obj.id == 99) {
                        app.runTpl("user/updateInfo")
                    } else if (obj.id == 100) {
                        app.runTpl("user/updatePassword")
                    }
                }
                , style: 'width: 100px;'
            });
            

        

            $('#btn_header_left').click(function () {
                layer.confirm('确定要退出登录吗', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    layui.apiLogin.logout(function(){
                        app.go(app.base.route.login);
                        layer.closeAll();
                    })
                    
                });

            })



            $('.work-btns').click(function () {
                var type = $(this).data('type')
                if (type == 0) {
                    // 取消
                    setCheck()
                } else if (type == 1) {
                    // 删除
                    var check = getCheck()
                    delData(check.items, check.ids)
                }
            })

            function getContent(page) {
                var listElem= $('.obj-list-box .content');
                listElem.html("");
                layui.apiObject.getObjectList(1, 10, function (list) {
                    for (var i = 0; i < list.length; i++) {
                        const info = list[i];
                        addDataHtml(info['id'], info['name'], info['update_time']);
                    }
                    // 点击事件
                    $('.obj-list-box .content-item').click(function () {
                        setCurrentTitle($(this).data('object_id'))
                        if (tplArg.onItemClick) {
                            tplArg.onItemClick({ obj_id: $(this).data('object_id') })
                        }
                    })
                })

                
            }

            function setCurrentTitle(objId) {
                var list= $('.obj-list-box .content-item');
                for (let i = 0; i < list.length; i++) {
                    const element = list[i];
                    var currentTitle= $(element).children().children()[0];
                    if($(element).data('object_id')== objId){
                        $(currentTitle).addClass("content-item-title-select");
                    }else{
                        $(currentTitle).removeClass("content-item-title-select");
                    }
                }
            }


            // 添加一条数据
            function addDataHtml(object_id, title, note) {
                var checked_html="";
                if(app.parseUrl().params['obj_id']== object_id){
                    checked_html="content-item-title-select";
                }
                var html = `
                <div class="content-item" data-object_id=${object_id}>
                    <a>
                        <div class="content-item-title ${checked_html}">
                            ${title}
                        </div>
                        <div class="content-item-note">
                            <span>
                                <i class="layui-icon layui-icon-time"></i>
                                ${note}
                            </span>
                        </div>
                        
                    </a>
                </div>`
                $('.content').append(html);
            }


            function setWindow() {
                $('.content').css('height', $(window).height() - 140)
            }


        })
    })

</script>